<!--审批流程图-->
<template>
    <div>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item>
                <el-input v-model="formInline.user" placeholder="流程名称"></el-input>
            </el-form-item>
            <el-form-item>
                <template slot-scope="scope">
                    <el-button type="primary" icon="el-icon-search" @click="Show">查询</el-button>
                    <el-button type="primary" icon="el-icon-search" plain @click="Show">高级查询</el-button>
                    <el-button type="success" icon="el-icon-plus" @click="ShowAdd">新增</el-button>
                    <el-button type="primary" i class="el-icon-edit" @click="ShowUpt">编辑</el-button>
                    <el-button type="danger" i class="el-icon-delete" @click="ShowDel(scope.row)">删除</el-button>
                    <el-button icon="el-icon-s-grid" plain @click="ShowShe"></el-button>
                </template>
            </el-form-item>
        </el-form>
        <el-divider></el-divider>
        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column prop="name" label="姓名" width="120"> </el-table-column>
            <el-table-column prop="address" label="地址" show-overflow-tooltip> </el-table-column>
        </el-table>
        <el-dialog title="提示" :visible.sync="dialogVisible" width="70%" :before-close="handleClose">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="流程名称">
                    <el-input v-model="formInline.user" placeholder="流程名称"></el-input>
                </el-form-item>
                <el-form-item label="功能菜单">
                    <el-select v-model="formInline.region" placeholder="功能菜单">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="formInline.user" placeholder="备注"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog title="收货地址" :visible.sync="dialogTableVisible">
            <el-table :data="gridData">
                <el-table-column property="date" label="id" width="150"></el-table-column>
                <el-table-column property="name" label="列名" width="200"></el-table-column>
                <el-table-column property="address" label="是否显示">
                    <template slot-scope="aaa">
                        <span v-if="aaa.row.address==true" style="color:red">是</span>
                        <span v-if="aaa.row.address==false" style="color:blue">否</span>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
        <!--流程图-->
        
        <!--分页-->
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageindex"
            :page-sizes="[20, 40, 80]"
            :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
        >
        </el-pagination>
    </div>
</template>
<script>
export default {
    data() {
        return {
            formInline: {
                user: '',
                region: undefined,
                user: ''
            },
            pageindex: 1,
            pagesize: 3,
            total: 0,
            tableData: [],
            multipleSelection: [],
            dialogVisible: false,
            dialogTableVisible: false
        };
    },
    created() {
        this.Show();
    },
    methods: {
        toggleSelection(rows) {
            if (rows) {
                rows.forEach((row) => {
                    this.$refs.multipleTable.toggleRowSelection(row);
                });
            } else {
                this.$refs.multipleTable.clearSelection();
            }
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        //显示列表
        Show() {},
        //条数
        handleSizeChange(val) {
            //console.log(`每页 ${val} 条`);
            this.pagesize = val;
            this.Show();
        },
        //页数
        handleCurrentChange(val) {
            //console.log(`当前页: ${val}`);
            this.pageindex = val;
            this.Show();
        },
        //新增
        ShowAdd() {
            this.dialogVisible = true;
        },
        //设置
        ShowShe() {
            this.dialogTableVisible = true;
        }
    }
};
</script>